<template>
  <div>
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" title="">
      <a-form-model :model="info" ref="ruleForm" :rules="rules" @submit.native.prevent>
        <a-form-model-item label="组织类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryId">
          <a-radio-group v-model="info.categoryId" style="padding-top: 6px">
            <a-radio :value="1" > 高校 </a-radio>
            <a-radio :value="2"> 公益组织 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="省份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="provinceCode">
          <a-select v-model="info.provinceCode" size="large">
            <a-select-option value="">省份</a-select-option>
            <a-select-option
              :value="item.provinceCode"
              v-for="(item, index) in provinceList"
              :key="index"
            >{{ item.provinceName }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="组织名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="organizationName">
          <a-input size="large" v-model="info.organizationName" />
        </a-form-model-item>
        <a-form-model-item label="组织logo" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <single-image :url="info.organizationLogo" @ok="url => info.organizationLogo = url" />
        </a-form-model-item>
        <a-form-model-item label="参与人数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number size="large" v-model="info.personCountView" style="width: 200px" />
        </a-form-model-item>
        <a-form-model-item label="积分数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number size="large" v-model="info.creditCountView" style="width: 200px" />
        </a-form-model-item>
        <a-form-model-item label="助力时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataRangeTime">
          <a-range-picker v-model="info.dataRangeTime" show-time format="YYYY-MM-DD HH:mm:ss" />
        </a-form-model-item>
        <!-- <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input type="textarea" :rows="4" size="large" v-model="info.schoolName" />
        </a-form-model-item> -->
        <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button
            htmlType="submit"
            type="primary"
            :loading="state.submitBtn"
            :disabled="state.submitBtn"
            @click="onSubmit"
          >保存</a-button
          >
          <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import SingleImage from '@/components/Upload/SingleImage'

export default {
  name: 'OrganizationAdd',
  components: {
    SingleImage
  },
  data() {
    return {
      id: this.$route.params.id || '',
      info: {
        dataRangeTime: [] // 日期范围
      },
      rules: {
        categoryId: [{ required: true, message: '组织类型必选', trigger: ['blur', 'change'] }],
        provinceCode: [{ required: true, message: '省份必选', trigger: ['blur', 'change'] }],
        organizationName: [{ required: true, message: '组织名称必填', trigger: ['blur', 'change'] }],
        dataRangeTime: [{ required: true, message: '助力时间必选', trigger: ['blur', 'change'] }]
      },
      provinceList: [], // 省份
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
    }
  },
  created() {
    this.getProvinceData()
    this.formInit() // 获取信息
  },
  methods: {
    // 获取信息
    formInit() {
      // 获取信息
      if (this.id) {
        this.getInfo()
      }
    },
    // 获取省
    getProvinceData () {
      this.$common.handlePost('/common/province', {})
      .then((res) => {
        if (res.code === 200) {
          this.provinceList = res.data
        }
      })
    },
    // 获取信息
    getInfo() {
      this.$common.handleGet('/organizations/' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          result.dataRangeTime = result.startedAt && result.endAt ? [moment(result.startedAt), moment(result.endAt)] : []
          this.info = result
        } else {
          this.$message.error(data.message)
          // 跳转到目的路由
          this.$router.push({ name: 'OrganizationList' })
        }
      })
    },
    moment,
    range(start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current < moment().endOf('day')
    },
    disabledRangeTime(_, type) {
      if (type === 'start') {
        return {
          disabledHours: () => this.range(0, 60).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [55, 56]
        }
      }
      return {
        disabledHours: () => this.range(0, 60).splice(20, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [55, 56]
      }
    },
    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true

      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.id ? handleFormData('/organizations/' + this.id) : handleFormData('/organizations/add')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      var info = { ...this.info }
      info.startedAt = info.dataRangeTime[0].format('YYYY-MM-DD HH:mm:ss')
      info.endAt = info.dataRangeTime[1].format('YYYY-MM-DD HH:mm:ss')

      this.$common
        .handlePost(url, info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 跳转到目的路由
                this.$router.push({ name: 'OrganizationList' })
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>
